<template>
  <div class="select-group-wrapper">
    <div class="flex space-x-2">
      <InputItem :value.sync="filterParams.companyName" label="公司名称" />
      <SelectItem :value.sync="filterParams.type" label="土地类型" :options="typeOptions" />
      <SelectItem :value.sync="filterParams.sellType" label="出让方式" :options="sellTypeOptions" />
      <SelectItem
        :value.sync="filterParams.area"
        label="面积范围"
        :options="landAreaOptions"
        @change="handleAreaChange"
      />
      <SelectItem
        :value.sync="filterParams.price"
        label="单价范围"
        :options="landPriceOptions"
        @change="handlePriceChange"
      />
    </div>

    <div class="btns">
      <el-button class="reset" icon="el-icon-refresh" plain @click="handleReset"
        >重置选项</el-button
      >
      <el-button class="bg-[#FFA800]" icon="el-icon-aim" @click="handleOk">智能选址</el-button>
    </div>

    <AnalysisProcess :visible.sync="visible" @analysisend="handleAnalysisend" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import SelectItem from '@/components/index/aiSelect/SelectItem.vue'
import InputItem from '@/components/index/aiSelect/InputItem.vue'
import AnalysisProcess from '@/components/index/aiSelect/AnalysisProcess.vue'
import { MutationsType } from '@/actions/aiSelect'

const defaultFilters = {
  type: '',
  sellType: '',
  price: '',
  area: '',
  companyName: '',
}

export default Vue.extend({
  components: { SelectItem, AnalysisProcess, InputItem },
  data() {
    return {
      filterParams: { ...defaultFilters },
      visible: false,
    }
  },
  computed: {
    ...mapGetters('dictionary', ['codes']),
    typeOptions() {
      return this.codes.land_type
    },
    sellTypeOptions() {
      return this.codes.sell_type
    },
    landAreaOptions() {
      return this.codes.land_area_range
    },
    landPriceOptions() {
      return this.codes.land_price_range
    },
  },
  methods: {
    handleAreaChange(item) {
      this.filterParams.areaOpts = item
    },
    handlePriceChange(item) {
      this.filterParams.priceOpts = item
    },
    handleAnalysisend() {
      this.$store.commit(MutationsType.SET_SELECT_RESOURCE, {
        label: '土地',
        name: 'Land',
        compName: 'LandList',
        params: { ...this.filterParams },
      })
    },
    hasFilters() {
      return Object.keys(this.filterParams).some((k) => {
        return !!this.filterParams[k]
      })
    },
    handleReset() {
      this.filterParams = { ...defaultFilters }
    },
    handleOk() {
      if (this.hasFilters()) {
        this.visible = true
      } else {
        this.$message({
          message: '请选择分析维度！',
          type: 'warning',
        })
      }
    },
  },
})
</script>
<style lang="scss" scoped>
.select-group-wrapper {
  position: relative;
  /* display: flex;
  justify-content: space-between;
  align-items: flex-end; */

  .btns {
    position: absolute;
    top: -92px;
    right: 0;
    display: flex;
    justify-content: flex-end;
  }

  ::v-deep.el-button {
    color: #fff;
    border-color: transparent;
  }

  .reset {
    color: #000 !important;
  }
}
</style>
